<template>
  <!-- 带操作的列表 -->
  <div style="width:100%" class="tableBox">
    <el-table
      :ref="config.ref || 'basicTable'"
      v-loading="config.loading"
      style="width:100%"
      :data="config.data"
      :border="config.border"
    >
      <el-table-column
        v-for="(column, index) in config.columns"
        :key="column.id || index"
        :column-key="'table_'+index"
        :label="column.label"
        :width="column.width ? column.width : 130"
        :sortable="column.sortable ? column.sortable : false"
        :sort-method="config.sortMethod || baseSortMethod"
        :align="column.columnAlign ? column.columnAlign : 'center' "
        :show-overflow-tooltip="!column.showOverflowTooltip ? column.showOverflowTooltip : true"
      >
        <slot slot-scope="scope">
          <!-- form input -->
          <div v-if="column.type === 'Input' ">
            <el-input
              v-model="scope.row[column.prop]"
              :placeholder="column.placeholder"
              @input="value => formInput(column, scope.row, value)"
            />
          </div>
          <div v-else-if="column.type === 'Operation'">
            <div
              v-for="(operation, ind) in column.operations"
              :key="operation.id || ind"
              :style="{display: 'inline-block',...operation.style}"
            >
              <el-button size="small" :type="operation.btnType" @click="operation.triggerFunc(column,operation,index,ind)">{{ operation.content }}</el-button>
            </div>
          </div>
          <div
            v-else
            class="text"
            :style="{'justify-content':column.columnAlign ? column.columnAlign : 'center'}"
          >
            {{ column.propMethod ? column.propMethod(scope.row) : scope.row[column.prop] }}
          </div>

        </slot>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import { isFunction } from "@/utils"
  export default {
    props: {
      config: {
        type: Object,
        "default": () => {}
      }
    },
    data() {
      return {

      }
    },
    computed: {

    },
    methods: {
      baseSortMethod() {},
      formInput(column, row, value) {
        if (isFunction(column.triggerFunc)) {
          return column.triggerFunc(row, value)
        }
        return ""
      }
    }
  }

</script>
<style scoped lang='scss'>
.tableBox ::v-deep .el-table__header{
  width: 100% !important;
}
.tableBox ::v-deep .el-table__body{
  width: 100% !important;
}
</style>
